<template>
    <div class="tags">
        <div :class="['option', {'active': activeIndex === index}]" v-for="(item,index) in data" :key="index"
            @click="onClickTag(item,index)">{{item.label}}（{{item.number}}）</div>
    </div>
</template>
<script>
export default {
    name: "DropdownTags",
    data() {
        return {
            activeIndex: -1
        };
    },
    components: {
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    mounted() {
    },
    methods: {
        onClickTag(data, index) {
            this.activeIndex = index;
            this.$emit('click', data);
        }
    }
};
</script>
<style lang="less" scoped>
.tags {
    padding: 10px;

    .option {
        display: inline-block;
        padding: 0 18px;
        height: 34px;
        line-height: 32px;
        border-radius: 34px;
        border: 1px solid;
        margin: 0 10px 10px 0;
        cursor: pointer;
    }

    .option:hover,
    .active {
        background-color: #3D6CF7;
        color: #fff;
    }
}
</style>